<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left;">查询设置</span>
      </div>
      <div class="text item">
        <el-form inline :model="supplierReturn">
          <el-form-item label="日期:">
            <el-date-picker
              v-model="supplierReturn.doDate"
              value-format="yyyy-MM-dd"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="单据类型：">
            <el-select v-model="supplierReturn.style" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.style"
                :label="item.style"
                :value="item.style"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button
          style="float: right; padding: 3px 0"
          type="success"
          icon="el-icon-zoom-in"
          @click="select"
        >搜索</el-button>
      </div>
    </el-card>

    <el-card class="box-card">
      <div class="text item">
        <el-table
          ref="singleTable"
          :data="purchaseList"
          highlight-current-row
          max-height="250"
          style="width: 100%"
          @row-click="getcustomerreturngoods"
        >
          <el-table-column property="doid" label="主键" width="120"></el-table-column>
          <el-table-column property="doNumber" label="单号" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column property="doDate" label="日期" width="250" show-overflow-tooltip></el-table-column>
          <el-table-column property="style" label="类型" width="250"></el-table-column>
          <el-table-column property="remarks" label="备注" width="250"></el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <el-table
          ref="singleTable"
          :data="customerReturnGoodsList"
          highlight-current-row
          max-height="250"
          style="width: 100%"
        >
          <el-table-column property="code" label="商品编号" width="120"></el-table-column>
          <el-table-column property="name" label="商品名称" width="120"></el-table-column>
          <el-table-column property="model" label="商品型号"></el-table-column>
          <el-table-column property="price" label="单价"></el-table-column>
          <el-table-column property="num" label="数量"></el-table-column>
          <el-table-column property="unit" label="单位"></el-table-column>
          <el-table-column property="total" label="总金额"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datearray: [],
      supplierReturn: {},
      supplier: [],
      purchaseList: [],
      customerReturnGoodsList: [],
      options: [] //查询所有的订单类型
    };
  },
  mounted() {
    this.getpurchaseList();
    this.getType();
  },

  methods: {
    //获取订单的类型
    getType() {
      var $this = this;
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tDo/orderType",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        console.log("返回的类型", res);
        $this.options = res.data.obj;
      });
    },
    clearpurchase() {
      this.datearray = [];
      this.supplierReturn = {};
      this.getpurchaseList();
    },
    //获取得到查询的订单号（报损  报溢）
    getpurchaseList() {
      this.supplierReturn.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tDo/list",
        params: this.supplierReturn
      }).then(res => {
        console.log("返回所有报损、报溢信息", res.data.obj);
        this.purchaseList = res.data.obj;
      });
    },
    //根据订单id  查询出所有的商品
    getcustomerreturngoods(row, column, event) {
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tDo/goodsList",
        params: {
          id: row.doid,
          style: row.style,
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("返回所有商品信息", res.data.obj);
        this.customerReturnGoodsList = res.data.obj;
      });
    },
    select() {
      this.supplierReturn.startTime = this.datearray[0];
      this.supplierReturn.endTime = this.datearray[1];
      this.getpurchaseList();
    }
  }
};
</script>
<style scoped>
.el-form-item {
  float: left;
}
</style>